<template>
<div class="commonContent">
  <div class="dialog_maxdiv" @click="handleShare">
    <van-icon name="share-o" size="0.6rem" class="shareImg" />
  </div>
  <div class="">
    <van-tag :type="setGroundType()">{{
        detailData.groundTypeDictMap.name
      }}</van-tag>
    <span class="ml8 title">{{ detailData.groundName }}</span>
  </div>
  <van-swipe class="my-swipe mt12" :autoplay="4000" v-if="detailData.photos && detailData.photos.length > 0">
    <van-swipe-item v-for="(item, index) in detailData.photos" :key="index">
      <div class="imgDiv" :style="{
            background: 'url(' + setPreviewUrl(item) + ')',
            backgroundSize: 'cover',
            backgroundPosition: 'center',
          }" @click="handlePreview(item, index)"></div>
      <!-- <van-image width="100%" height="4rem" :src="setPreviewUrl(item)" fit="fill" /> -->
    </van-swipe-item>
  </van-swipe>
  <div class="cardContent mt12">
    <span style="font-weight: bolder">基本信息</span>
    <div class="mb12" v-for="(item, index) in dataList" :class="index == 0 ? 'mt20' : ''" :key="index">
      <van-row>
        <van-col :span="5">
          <span class="label">{{ item.label }}</span>
        </van-col>
        <van-col :span="19">
          <span class="itemContent">{{ detailData[item.field] }}</span>
        </van-col>
      </van-row>
    </div>
  </div>
  <van-popup v-model="showQRCode">
    <div class="popups">
      <vue-qr :text="setQRCodeUrl()" :size="200"></vue-qr>
    </div>
  </van-popup>
</div>
</template>
<script>
import {
  ImagePreview
} from "vant";
import vueQr from "vue-qr";
export default {
  name: "groundDetail",
  components: {
    vueQr,
  },
  data() {
    return {
      detailData: {
        groundTypeDictMap: {},
      },
      dataList: [{
          label: "详细地址",
          field: "address",
        },
        {
          label: "咨询电话",
          field: "tel",
        },
        {
          label: "阵地介绍",
          field: "intro",
        },
      ],
      showQRCode: false,
    };
  },
  created() {
    this.getDetail(this.$route.query.id);
  },
  methods: {
    getDetail(id) {
      let me = this;
      me.$api
        .getGroundDetail({
          params: {
            groundId: id,
          },
        })
        .then((res) => {
          me.detailData = res;
        });
    },
    setPreviewUrl(item) {
      return (
        process.env.VUE_APP_BASE_URL +
        "admin/upms/file/download?filename=" +
        item
      );
    },
    setGroundType() {
      let me = this;
      let types = "danger";
      if (me.detailData.groundType == "1") {
        types = "danger";
      } else if (me.detailData.groundType == "2") {
        types = "primary";
      } else if (me.detailData.groundType == "3") {
        types = "success";
      } else {
        types = "warning";
      }
      return types;
    },
    handlePreview(item, index) {
      let arr = JSON.parse(JSON.stringify(this.detailData.photos));
      var result = arr.map((item, i) => {
        return (
          process.env.VUE_APP_BASE_URL +
          "admin/upms/file/download?filename=" +
          item +
          "&type=1"
        );
      });

      ImagePreview({
        images: result,
        startPosition: index,
      });
    },
    setQRCodeUrl() {
      let str =
        url.baseUrl +
        "middle?groundId=" +
        this.$route.query.id +
        "&title=" +
        this.detailData.groundName;
      return str;
    },
    handleShare() {
      this.showQRCode = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.popups {
    img {
        margin: 0.4rem;
    }
}
.dialog_maxdiv {
    width: 0.8rem;
    height: 0.8rem;
    background-color: #fff;
    border-radius: 50%;
    position: fixed;
    bottom: 2rem;
    right: 0.2rem;
    box-shadow: 0.06rem 0.06rem 0.06rem #f2f3f5, 0.06rem -0.06rem 0.06rem #f2f3f5, -0.06rem 0.06rem 0.06rem #f2f3f5, -0.06rem -0.06rem 0.06rem #f2f3f5;
    .shareImg {
        line-height: 0.8rem;
        left: 0.1rem;
        color: #181818;
    }
}
</style>
